<script setup>
import { ref, onMounted } from 'vue';
import router from '@/router';
import loginApi from '@/api/Login_api.js';

const activeIndex = ref('1');
const loginAdmin = ref({
  current: 1,
  limit: 10,
  total: 0,
  id: 0,
  userNickname: '',
  userNumber: '',
  userPassword: '',
  role: '',
  isdel: ''
});
const menuData = ref([]);
const isCollapse = ref(false);

// 根据角色生成菜单
function generateMenu(role) {
  const baseMenu = [
    // {
    //   name: '我的',
    //   icon: 'User',
    //   children: [
    //     {name: '我的信息', icon: 'EditPen', path: "/Myself"},
    //     {name: '我的帖子', icon: 'Files', path: "/MyselfPost"},
    //     {name: '我的消息', icon: 'Message', path: "/MessageCenter"}, // 新增
    //     {name: '修改密码', icon: 'Key', path: "/ChangePassword"},
    //   ]
    // },
    {
      name: '帖子',
      icon: 'Reading',
      children: [
        {name: '帖子首页', icon: 'House', path: "/PostHouse"},
        {name: '创作帖子', icon: 'Plus', path: "/PostCreate"},
      ]
    }
  ];

  const adminMenu = {
    name: '管理',
    icon: 'Lock',
    children: [
      {name: '帖子管理', icon: 'Management', path: "/Post"},
      {name: '类型管理', icon: 'Management', path: "/Classification"},
      {name: '账号管理', icon: 'Management', path: "/User"},
    ]
  };

  // 如果是管理员，显示所有菜单
  if (role === 'administrator') {
    return [...baseMenu, adminMenu];
  }
  // 普通用户只显示基础菜单
  return baseMenu;
}

async function getLogin() {
  let token = localStorage.getItem("token");
  if (!token) {
    router.push("/login");
    return;
  }

  try {
    const res = await loginApi.loginInfo();
    loginAdmin.value = res;
    // 根据用户角色动态生成菜单
    menuData.value = generateMenu(res.role);
  } catch (error) {
    console.error("获取用户信息失败", error);
    router.push("/login");
  }
}

// 用户下拉菜单的点击
// 在 handleSelect 方法中添加消息中心跳转
function handleSelect(key) {
  if (key === 'logout') {
    logout();
  } else if (key === 'changePassword') {
    router.push('/ChangePassword');
  } else if (key === 'myInfo') {
    router.push('/Myself');
  } else if (key === 'myPosts') {
    router.push('/MyselfPost');
  } else if (key === 'myMessages') {
    router.push('/MessageCenter'); // 新增
  }
}

// 左侧菜单动作
function handleMenu(path) {
  if (path) {
    router.push(path);
  }
}

// 退出
function logout() {
  localStorage.removeItem("token");
  router.push('/login');
}

// 返回首页
function goHome() {
  router.push('/PostHouse');
}

onMounted(getLogin);
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            background-color="#f3f7ff"
            text-color="#393939"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
          <el-menu-item index="0" @click="goHome">
            <img style="height: 80%" src="@/assets/log.png" alt="易视界"/>
            <span style="padding-left: 50px; font-size: 24px; color:#393939;">佰家珍铭</span>
          </el-menu-item>
          <div class="flex-grow"/>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Stamp/>
              </el-icon>
              {{ loginAdmin ? loginAdmin.userNickname : '没登录' }}
            </template>

            <el-menu-item index="myInfo">我的信息</el-menu-item>
            <el-menu-item index="myPosts">我的帖子</el-menu-item>
            <el-menu-item index="myMessages">我的消息</el-menu-item> <!-- 新增 -->
            <el-menu-item index="changePassword">修改密码</el-menu-item>
            <el-menu-item index="logout">退出
              <el-icon>
                <SwitchButton/>
              </el-icon>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>

      <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <div
              style="height: 60px; line-height: 60px; text-align: right; color: #FFF; font-size: 20px; margin-right: 24px;">
            <el-icon @click="isCollapse = !isCollapse">
              <Expand v-if="isCollapse"/>
              <Fold v-else/>
            </el-icon>
          </div>
          <el-menu
              active-text-color="#ffd04b"
              background-color="#1f4e5f"
              class="el-menu-vertical-demo"
              default-active="/PostHouse"
              text-color="#fff"
              :collapse="isCollapse"
              @select="handleMenu"
          >
            <!-- 动态生成菜单 -->
            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="index.toString()">
              <template #title>
                <el-icon>
                  <component :is="menu.icon" style="width: 1em; height: 1em; margin-right: 8px"/>
                </el-icon>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="(child, ind) in menu.children" :key="ind" :index="child.path">
                <el-icon>
                  <component :is="child.icon"/>
                </el-icon>
                <span>{{ child.name }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.flex-grow {
  flex-grow: 1;
}

.common-layout,
.el-container {
  height: 100%;
}

.el-header {
  --el-header-padding: 0;
  --el-header-height: 80px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
}

.el-menu--horizontal {
  height: 80px;
  background-color: #f4f7f7;
}

.el-aside {
  background-color: #1f4e5f;
  transition: width 0.3s ease;
}

.el-main {
  padding: 0px;
}

.el-menu {
  border-width: 0px;
}

.el-menu-item {
  font-size: 16px;
}

.el-menu-demo {
  box-shadow: 0 2px 4px #f3d5be;
}

.el-sub-menu__title {
  font-size: 16px;
}
</style>

<!--<script setup>-->
<!--import { ref, onMounted } from 'vue';-->
<!--import router from '@/router';-->
<!--import loginApi from '@/api/Login_api.js';-->

<!--const activeIndex = ref('1');-->
<!--const loginAdmin = ref({-->
<!--  current: 1,-->
<!--  limit: 10,-->
<!--  total: 0,-->
<!--  id: 0,-->
<!--  userNickname: '',-->
<!--  userNumber: '',-->
<!--  userPassword: '',-->
<!--  role: '',-->
<!--  isdel: ''-->
<!--});-->
<!--const menuData = ref([]);-->
<!--const isCollapse = ref(false);-->

<!--// 根据角色生成菜单-->
<!--function generateMenu(role) {-->
<!--  const baseMenu = [-->
<!--    {-->
<!--      name: '我的',-->
<!--      icon: 'User',-->
<!--      children: [-->
<!--        {name: '我的信息', icon: 'EditPen', path: "/Myself"},-->
<!--        {name: '我的帖子', icon: 'Files', path: "/MyselfPost"},-->
<!--      ]-->
<!--    },-->
<!--    {-->
<!--      name: '帖子',-->
<!--      icon: 'Reading',-->
<!--      children: [-->
<!--        {name: '帖子首页', icon: 'House', path: "/PostHouse"},-->
<!--        {name: '创作帖子', icon: 'Plus', path: "/PostCreate"},-->
<!--      ]-->
<!--    }-->
<!--  ];-->

<!--  const adminMenu = {-->
<!--    name: '管理',-->
<!--    icon: 'Lock',-->
<!--    children: [-->
<!--      {name: '帖子管理', icon: 'Management', path: "/Post"},-->
<!--      {name: '类型管理', icon: 'Management', path: "/Classification"},-->
<!--      {name: '账号管理', icon: 'Management', path: "/User"},-->
<!--    ]-->
<!--  };-->

<!--  // 如果是管理员，显示所有菜单-->
<!--  if (role === 'administrator') {-->
<!--    return [...baseMenu, adminMenu];-->
<!--  }-->
<!--  // 普通用户只显示基础菜单-->
<!--  return baseMenu;-->
<!--}-->

<!--async function getLogin() {-->
<!--  let token = localStorage.getItem("token");-->
<!--  if (!token) {-->
<!--    router.push("/login");-->
<!--    return;-->
<!--  }-->

<!--  try {-->
<!--    const res = await loginApi.loginInfo();-->
<!--    loginAdmin.value = res;-->
<!--    // 根据用户角色动态生成菜单-->
<!--    menuData.value = generateMenu(res.role);-->
<!--  } catch (error) {-->
<!--    console.error("获取用户信息失败", error);-->
<!--    router.push("/login");-->
<!--  }-->
<!--}-->

<!--// 用户下拉菜单的点击-->
<!--function handleSelect(key) {-->
<!--  if (key === 'logout') {-->
<!--    logout();-->
<!--  }-->
<!--}-->

<!--// 左侧菜单动作-->
<!--function handleMenu(path) {-->
<!--  if (path) {-->
<!--    router.push(path);-->
<!--  }-->
<!--}-->

<!--// 退出-->
<!--function logout() {-->
<!--  localStorage.removeItem("token");-->
<!--  router.push('/login');-->
<!--}-->

<!--onMounted(getLogin);-->
<!--</script>-->

<!--<template>-->
<!--  <div class="common-layout">-->
<!--    <el-container>-->
<!--      <el-header>-->
<!--        <el-menu-->
<!--            :default-active="activeIndex"-->
<!--            class="el-menu-demo"-->
<!--            mode="horizontal"-->
<!--            :ellipsis="false"-->
<!--            background-color="#f3f7ff"-->
<!--            text-color="#393939"-->
<!--            active-text-color="#ffd04b"-->
<!--            @select="handleSelect"-->
<!--        >-->
<!--          <el-menu-item index="0">-->
<!--            <img style="height: 80%" src="@/assets/log.png" alt="易视界"/>-->
<!--            <span style="padding-left: 50px; font-size: 24px; color:#393939;">佰家珍铭</span>-->
<!--          </el-menu-item>-->
<!--          <div class="flex-grow"/>-->
<!--          <el-sub-menu index="1">-->
<!--            <template #title>-->
<!--              <el-icon>-->
<!--                <Stamp/>-->
<!--              </el-icon>-->
<!--              {{ loginAdmin ? loginAdmin.userNickname : '没登录' }}-->
<!--            </template>-->
<!--            <el-menu-item index="1-1">我的</el-menu-item>-->
<!--            <el-menu-item index="1-2">重置密码</el-menu-item>-->
<!--            <el-menu-item index="logout">退出-->
<!--              <el-icon>-->
<!--                <SwitchButton/>-->
<!--              </el-icon>-->
<!--            </el-menu-item>-->
<!--          </el-sub-menu>-->
<!--        </el-menu>-->
<!--      </el-header>-->

<!--      <el-container>-->
<!--        <el-aside :width="isCollapse ? '64px' : '200px'">-->
<!--          <div-->
<!--              style="height: 60px; line-height: 60px; text-align: right; color: #FFF; font-size: 20px; margin-right: 24px;">-->
<!--            <el-icon @click="isCollapse = !isCollapse">-->
<!--              <Expand v-if="isCollapse"/>-->
<!--              <Fold v-else/>-->
<!--            </el-icon>-->
<!--          </div>-->
<!--          <el-menu-->
<!--              active-text-color="#ffd04b"-->
<!--              background-color="#1f4e5f"-->
<!--              class="el-menu-vertical-demo"-->
<!--              default-active="/PostHouse"-->
<!--              text-color="#fff"-->
<!--              :collapse="isCollapse"-->
<!--              @select="handleMenu"-->
<!--          >-->
<!--            &lt;!&ndash; 动态生成菜单 &ndash;&gt;-->
<!--            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="index.toString()">-->
<!--              <template #title>-->
<!--                <el-icon>-->
<!--                  <component :is="menu.icon" style="width: 1em; height: 1em; margin-right: 8px"/>-->
<!--                </el-icon>-->
<!--                <span>{{ menu.name }}</span>-->
<!--              </template>-->
<!--              <el-menu-item v-for="(child, ind) in menu.children" :key="ind" :index="child.path">-->
<!--                <el-icon>-->
<!--                  <component :is="child.icon"/>-->
<!--                </el-icon>-->
<!--                <span>{{ child.name }}</span>-->
<!--              </el-menu-item>-->
<!--            </el-sub-menu>-->
<!--          </el-menu>-->
<!--        </el-aside>-->

<!--        <el-main>-->
<!--          <router-view></router-view>-->
<!--        </el-main>-->
<!--      </el-container>-->
<!--    </el-container>-->
<!--  </div>-->
<!--</template>-->

<!--<style>-->
<!--.flex-grow {-->
<!--  flex-grow: 1;-->
<!--}-->

<!--.common-layout,-->
<!--.el-container {-->
<!--  height: 100%;-->
<!--}-->

<!--.el-header {-->
<!--  &#45;&#45;el-header-padding: 0;-->
<!--  &#45;&#45;el-header-height: 80px;-->
<!--  box-sizing: border-box;-->
<!--  flex-shrink: 0;-->
<!--  height: var(&#45;&#45;el-header-height);-->
<!--  padding: var(&#45;&#45;el-header-padding);-->
<!--}-->

<!--.el-menu&#45;&#45;horizontal {-->
<!--  height: 80px;-->
<!--  background-color: #f4f7f7;-->
<!--}-->

<!--.el-aside {-->
<!--  background-color: #1f4e5f;-->
<!--  transition: width 0.3s ease;-->
<!--}-->

<!--.el-main {-->
<!--  padding: 0px;-->
<!--}-->

<!--.el-menu {-->
<!--  border-width: 0px;-->
<!--}-->

<!--.el-menu-item {-->
<!--  font-size: 16px;-->
<!--}-->

<!--.el-menu-demo {-->
<!--  box-shadow: 0 2px 4px #f3d5be;-->
<!--}-->

<!--.el-sub-menu__title {-->
<!--  font-size: 16px;-->
<!--}-->
<!--</style>-->